<template>
  <NModal
    :show="show"
    @update:show="$emit('update:show', $event)"
  >
    <div class="custom-modal included-modal">
      <div class="modal-title">
        <span>关联已入藏藏品</span>
        <img
          src="@/assets/images/meeting_dialog_close.png"
          alt=""
          @click="$emit('update:show', false)"
        />
      </div>
      <div class="modal-container included-container">
        <div class="container-top">
          <div class="select-container">
            <div class="select-list">
              <n-form
                ref="formRef"
                :model="formData"
                label-placement="left"
                label-width="auto"
                require-mark-placement="right-hanging"
              >
                <n-grid
                  :cols="5"
                  :x-gap="20"
                >
                  <n-grid-item
                    v-for="(item, index) in formItems"
                    :key="index"
                  >
                    <n-form-item
                      :label="item.label"
                      :path="item.key"
                    >
                      <n-input v-model:value="formData[item.key]" />
                    </n-form-item>
                  </n-grid-item>
                </n-grid>
              </n-form>
            </div>
            <div class="select-line"></div>
            <div class="select-btns">
              <n-button
                type="primary"
                @click="handleSelect"
              >
                查询
              </n-button>
              <n-button @click="handleReset">重置</n-button>
            </div>
          </div>
          <div class="table-container">
            <NDataTable
              v-bind="props"
              :bordered="false"
              :row-key="rowKey"
              :columns="columns"
              :data="tableData"
              :loading="tableLoading"
            />
            <NPagination
              :page-sizes="paginationReactive.pageSizes"
              :item-count="paginationReactive.itemCount"
              :page="paginationReactive.page"
              :page-size="paginationReactive.pageSize"
              @update:page="paginationReactive.onChange"
              @update:page-size="paginationReactive.onUpdatePageSize"
              show-size-picker
              show-quick-jumper
              :suffix="() => '页'"
              class="pagination-container"
            >
              <template #prefix>
                <span style="font-size: 14px">共{{ paginationReactive.itemCount }}条</span>
              </template>
            </NPagination>
          </div>
        </div>
        <div class="container-bottom">
          <div class="btn-list">
            <n-button @click="handleCancel">取消</n-button>
            <n-button
              type="primary"
              @click="handleSubmit"
            >
              确定
            </n-button>
          </div>
        </div>
      </div>
    </div>
  </NModal>
</template>

<script setup lang="ts">
import { ref, reactive, h } from 'vue'
import {
  NForm,
  NFormItem,
  NInput,
  NDataTable,
  NButton,
  NPagination,
  NGrid,
  NGridItem,
  type DataTableColumns,
  NIcon,
  NModal
} from 'naive-ui'
import { useViewerStore } from '../../Common/store'

const props = defineProps({
  show: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['update:show', 'select', 'reset', 'cancel', 'submit'])

const useStore = useViewerStore()

const formData = ref<any>({})

const formItems = [
  { label: '藏品名称', key: 'key1' },
  { label: '资源码', key: 'key2' },
  { label: '流水号', key: 'key3' },
  { label: '版本类型', key: 'key4' },
  { label: '征集方式', key: 'key5' },
  { label: '藏品状态', key: 'key6' },
  { label: '去向', key: 'key7' },
  { label: '库房位置', key: 'key8' },
  { label: '来源', key: 'key9' },
  { label: '藏品标签', key: 'key10' }
]

const handleSelect = () => {
  emit('select', formData.value)
}

const handleReset = () => {
  formData.value = {}
  emit('reset')
}

const tableLoading = ref(false)
const tableData: any = ref([])
const rowKey: any = (e: any) => e.id || ''
const columns: DataTableColumns = [
  {
    title: '流水号',
    key: '1',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '资产码',
    key: '22',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '藏品名称',
    key: '3',
    width: '15rem',
    align: useStore.isCenter,
    ellipsis: {
      tooltip: {
        contentStyle: 'max-width:200rem'
      }
    }
    // render(row) {
    //   const room = roomList.value.find((item) => item.value == row.conferenceRoomId)
    //   return room ? room.label : '未知'
    // }
  },
  {
    title: '类型',
    key: '4',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '藏品标签',
    key: '5',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '第一责任人',
    key: '6',
    width: '12rem',
    align: useStore.isCenter
  },
  {
    title: '来源',
    key: '7',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '征集方式',
    key: '8',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '藏品状态',
    key: '9',
    width: '10rem',
    align: useStore.isCenter
    // render({ fromStatusCode }) {
    //   const status = statusList.find((item) => item.value === fromStatusCode)
    //   return status ? status.label : '未知'
    // }
  },
  {
    title: '版本',
    key: '10',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '库房位置',
    key: '11',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '去向',
    key: '12',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '领取人',
    key: '13',
    width: '10rem',
    align: useStore.isCenter
  },
  {
    title: '操作',
    key: 'action',
    width: '15rem',
    align: useStore.isCenter,
    fixed: 'right',
    render: (e: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: () => {}
        },
        {
          default: () => '关联'
        }
      )
    ]
  }
]
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    // queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    // queryTableData()
  }
})

const handleCancel = () => {
  emit('update:show', false)
  emit('cancel')
}

const handleSubmit = () => {
  emit('update:show', false)
  emit('submit', formData.value)
}
</script>

<style lang="scss" scoped>
.included-modal {
  width: 1376px;
  height: 640px;
  .included-container {
    position: relative;
    padding: 0 0;
    align-items: flex-start;
  }
  .container-top {
    padding: 24px;
    .select-container {
      display: flex;
      align-items: center;
      //   gap: 19px;
      .select-line,
      .select-btns {
        margin-top: -20px;
      }
      .select-line {
        width: 84px;
        height: 1px;
        transform: rotate(90deg);
        background: #f1f2f4;
      }
      .select-btns {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
    }
    .pagination-container {
      position: absolute;
      bottom: 80px;
    }
  }
  .container-bottom {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 56px;
    padding: 0px 24px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-top: 1px solid #e2e2e2;
    .btn-list {
      display: flex;
      gap: 24px;
    }
  }
}
:deep(.n-form-item-feedback-wrapper) {
  min-height: 20px;
}
:deep(.n-form-item-label__text) {
  color: #4e5969;
  text-align: right;
  font-size: 12px;
  line-height: 22px; /* 183.333% */
}
:deep(.n-form-item-blank) {
  width: 168px;
}
</style>
